<template>
	<view>
		<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed" :style="[{ height: CustomBar + 'px' }]"
				:class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
				<view class="icon df-c" :style="{height:(CustomBar-StatusBar)+'px'}" v-if="icon">
					<image :src="temImgUrl+'/logo.png'" mode="widthFix"></image>
				</view>
				<view class="action" :style="{height:(CustomBar-StatusBar)+'px'}" v-if="isBack">
					<text :style="{color:backColor}" class="cuIcon-back cu-back" @tap="BackPage"
						v-if="showBackIcon"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{ top: StatusBar + 'px' }]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				temImgUrl: this.$IMG_URL_TEMP
			};
		},
		name: 'cu-custom',
		computed: {
			...mapState({
				CustomBar: state => state.init.customBar,
				StatusBar: state => state.init.statusBar,
			}),
			posterStatus() {
				return this.$store.state.common.posterStatus
			}
		},
		props: {
			bgColor: {
				type: String,
				default: 'red'
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			showBackIcon: {
				type: Boolean,
				default: true
			},
			bgImage: {
				type: String,
				default: ''
			},
			icon: {
				type: Boolean,
				default: false
			},
			backColor: {
				type: String,
				default: '#333333'
			},
			type: {
				type: String,
				default: ''
			},
			backUrl: {
				type: String,
				default: ''
			}
		},
		created() {

		},

		mounted() {

		},
		methods: {
			BackPage() {
				if (this.type == 'poster' && this.posterStatus == 0) {
					return false;
				} else if (this.backUrl) {
					uni.navigateTo({
						url: this.backUrl
					})
				} else {
					uni.navigateBack({
						delta: 1,
						// success: () => {
						// 	const pages = getCurrentPages() // 获取当前页面栈数组，第一个元素为首页，最后一个元素为当前页面
						// 	let page = pages[Math.max(pages.length - 1, 0)] // 要返回到的页面，超过页面栈，则为首页
						// 	page.onLoad(1) // 通过调用页面的 onLoad 里面的处理逻辑实现刷新数据
						// }
					});
				}
			}
		}
	};
</script>

<style scoped lang="less">
	.action {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		font-weight: 500;

	}

	.icon {
		position: absolute;
		bottom: 0;
		left: 30rpx;
		width: 150rpx;
	}

	.cu-back {
		position: absolute;
		left: 30rpx;
		font-weight: 400;
	}
</style>
